<template>
    <!-- 管理员页面 -->
    <div id="admin">
        <Nav></Nav>
         <div>&nbsp;</div>
        <el-col :span="3" class="tac">
            <el-menu default-active="1" class="el-menu-vertical-demo" 
            @open="handleOpen" @close="handleClose">
                <el-menu-item index="1">
                    <span slot="title">
                        <router-link to="/all">用户信息</router-link>
                    </span>
                </el-menu-item>
                <el-menu-item index="2">
                    <span slot="title">
                        <router-link to="/listAll">歌单信息</router-link>
                    </span>
                </el-menu-item>
                <el-menu-item index="3">
                    <span slot="title">
                        <router-link to="/songAll">歌曲信息</router-link>
                    </span>
                </el-menu-item>
            </el-menu>
        </el-col>
        <div class="body">
            <router-view></router-view>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import Nav from "../components/nav.vue";
import Footer from "../components/footer.vue";
import { mapState, mapMutations } from "vuex";
export default {
    components: {
        Nav,
        Footer
    },
    computed:{
        ...mapState("user", ["user"])
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    },
}
</script>

<style>
#admin {
    background: plum;
    width: 85%;
    margin: 0px auto;
    /* height: 500px; */
}

/* #admin .nav {
    border: 1px black solid;
    background-color: #333;
    width: 200px;
    float: left;
} */

#admin .tac {
    margin-top: 20px;
    margin-left: 20px; 
     /* width: 200px; */
     /* float: left; */
}
#admin .tac a{
    text-decoration: none;
}
#admin .body {
    /* float: right; */
    background: plum;
    margin-left: 200px;
    margin-top: 20px;
    
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}
</style>